<template>
  <div :class="introContainer" v-if="show">
    <div class="logo">
      <img src="../../assets/logo-temp.png" alt="" height="100%" width="100%">
    </div>
  </div>
</template>

<script>
export default {
  name: 'Intro',
  data () {
    return {
      show: true,
      check: '0',
      introContainer: 'intro-container'
    }
  },
  created () {
    localStorage.setItem('checkOut', this.check)
    var data = localStorage.getItem('chekOut')
    if (data === null) {
      this.check++
      if (this.check >= 1) {
        setTimeout(() => {
          this.introContainer = 'intro-container-fade'
        }, 4000)
        setTimeout(() => {
          this.show = false
        }, 5000)
      }
    } else {
      this.show = false
    }
  }
}
</script>

<style scoped lang="less">

@keyframes fade {
  0% {
    opacity: .3;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: .3;
  }
}

@keyframes main {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.intro-container {
  height: 100vh;
  width: 100vw;
  background-color: #fed71a;
  position: absolute;
  z-index: 3;
  transition: all 2s;
  opacity: 1;

  .logo {
    height: 200px;
    width: 200px;
    margin: 20% auto;
    transition: all .5s;
    opacity: 1;
    animation: fade 2s infinite ease-in-out;
  }
}

.intro-container-fade {
  height: 100vh;
  width: 100vw;
  background-color: #fed71a;
  position: absolute;
  z-index: 3;
  transition: all 2s;
  animation: main 1s;
  .logo {
    height: 200px;
    width: 200px;
    margin: 20% auto;
    transition: all .5s;
    opacity: 1;
    animation: fade 2s infinite ease-in-out;
  }
}
</style>
